<template>
	<view class="joinResearchContainer">
		<view class="joinResearchTit">{{quesTitle}}</view>
		<block v-if="questionList.length > 0">
			<view class="questionItem" v-for="item,index in questionList">
				<view class="questionTit">{{index+1}}、{{item.questionName}}</view>
				<view class="questionContent">
					<!-- 题目类型 0 单选 1 多选 2简答 -->
					<block v-if="item.questionType == 0">
						<radio-group @change="changeCheck" :data-idx='index'>
							<label class="uni-list-cell uni-list-cell-pd flex" v-for="(temp,jdx) in item.surveyOptionList" :key="jdx">
								<view>
									<radio :value="temp.optionId" color='#19AD78' :checked="temp.optionId == item.checkVal" :disabled="flag==2" />
								</view>
								<view>{{temp.sorting}}.{{temp.optionName}}</view>
							</label>
						</radio-group>
					</block>
					<block v-if="item.questionType == 1">
						<checkbox-group @change="changeCheck" :data-idx='index'>
							<label class="uni-list-cell uni-list-cell-pd flex" v-for="(temp,jdx) in item.surveyOptionList" :key="jdx">
								<view>
									<checkbox :value="temp.optionId" color='#19AD78' :checked="item.checkVal.indexOf(temp.optionId)!=-1" :disabled="flag==2" />
								</view>
								<view>{{temp.sorting}}.{{temp.optionName}}</view>
							</label>
						</checkbox-group>
					</block>
					<block v-if="item.questionType == 2">
						<view class="questionContent" style="padding-top: 0px;">
							<textarea placeholder="请输入内容" v-model="item.checkVal" :disabled="flag==2" class="textareaBox"></textarea>
						</view>
					</block>
				</view>
			</view>
			<button v-if="flag == 2" class="submitBtn" style="background: #bcbcbc">提交</button>
			<button v-else class="submitBtn" @click="submitHandler()">提交</button>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				quesTitle: '',
				surveyId: '',
				flag: 1,//1参与，2查看详情
				questionList: []
			}
		},
		onLoad(options) {
			this.surveyId = options.surveyId;
			this.flag = options.flag;
			this.quesTitle = options.quesTitle;
		},
		onShow() {
			if(this.flag == 1) {//参与调研查询题目
				this.searchSurveyQuestion();
			}else {
				this.searchQuestionDetail();//查询明细
			}
		},
		methods: {
			searchSurveyQuestion() {
				let _this = this;
				this.$utils.requestFun('/curriculum/surveyInfoApi/api/findSurveyQuestionListApi?route=curriculum',{
					token: getApp().globalData.token,
					channelId: getApp().globalData.channelId,
					surveyId: _this.surveyId
				},'GET').then(res=> {
					if(res.data.data && res.data.data.length > 0) {
						for(let i = 0;i<res.data.data.length;i++) {
							res.data.data[i].checkVal = '';
						}
						_this.questionList = res.data.data;
					}else {
						_this.questionList = [];
					}
				})
			},
			changeCheck: function(evt) {
				let idx = evt.target.dataset.idx;
				this.questionList[idx].checkVal = evt.detail.value;
			},
			//查询明细
			searchQuestionDetail() {
				let _this = this;
				this.$utils.requestFun('/curriculum/surveyUserSubmit/api/findJoinSurveyById?route=curriculum',{
					token: getApp().globalData.token,
					channelId: getApp().globalData.channelId,
					userSubmitId: _this.surveyId
				},'GET').then(res=> {
					// 题目类型 0 单选 1 多选 2简答
					if(res.data.data && res.data.data.length > 0) {
						for(let i = 0;i<res.data.data.length;i++) {
							if(res.data.data[i].questionType != 2) {
								res.data.data[i].checkVal = [];
								for(let j = 0;j<res.data.data[i].surveyOptionList.length;j++) {
									if(res.data.data[i].surveyOptionList[j].isCheck == 1) {
										if(res.data.data[i].questionType == 1) {//多选
											res.data.data[i].checkVal.push(res.data.data[i].surveyOptionList[j].optionId);
										}else {//单选
											res.data.data[i].checkVal = res.data.data[i].surveyOptionList[j].optionId;
											break;
										}
									}
								}
							}else {
								res.data.data[i].checkVal = res.data.data[i].optionId;
							}
						}
						_this.questionList = res.data.data;
					}else {
						_this.questionList = [];
					}
					console.log(_this.questionList)
				})
			},
			//提交
			submitHandler() {
				let surveySubmitOptionArr = [];
				let _this = this;
				// 题目类型 0 单选 1 多选 2简答
				let isCheckFlag = true;
				for(let i = 0;i<this.questionList.length;i++) {
					if(this.questionList[i].questionType == 1) {
						if(this.questionList[i].checkVal.length<=0) {
							isCheckFlag = false;
							break;
						}else {
							for(let j = 0;j<this.questionList[i].checkVal.length;j++) {
								let obj = {
									"optionId": this.questionList[i].checkVal[j],
									"questionId": this.questionList[i].questionId
								}
								surveySubmitOptionArr.push(obj);
							}
						}
					}else {
						if(this.questionList[i].checkVal == '') {
							isCheckFlag = false;
							break;
						}else {
							let obj = {
								"optionId": this.questionList[i].checkVal,
								"questionId": this.questionList[i].questionId
							}
							surveySubmitOptionArr.push(obj);
						}
					}
				}
				if(!isCheckFlag) {
					uni.showToast({
						title: '问卷没有填写完整哦！',
						icon: 'none'
					});
					return;
				}
				this.$utils.requestFun('/curriculum/surveyUserSubmit/api/saveSurveyUserSubmit?route=curriculum',{
					token: getApp().globalData.token,
					channelId: getApp().globalData.channelId,//是否只查询被邀请的预约单据 0否；1是
					surveyId: _this.surveyId,
					surveySubmitOptionStr: JSON.stringify(surveySubmitOptionArr)
				},'GET').then(res=> {
					uni.showToast({
						title: '提交成功！',
						success() {
							setTimeout(()=> {
								uni.navigateBack({
								    delta: 1
								});
							}, 1000);
						}
					})
				})
			}
		}
	}
</script>

<style>
	.joinResearchContainer {
		width: 100%;
		height: 100%;
		margin-bottom: 150rpx;
		background: #FFFFFF;
	}
	.txtOverFlow {
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.flex {
		display: flex;
	}
	.joinResearchTit {
		font-size: 36rpx;
		font-weight: bold;
		color: #222222;
		line-height: 100rpx;
		border-bottom: 1px solid #EEEEEE;
		width: 94%;
		margin: 0 24rpx;
		text-align: center;
	}
	.questionItem {
		width: 94%;
		margin: 40rpx 24rpx 50rpx 24rpx;
	}
	.questionTit {
		font-size: 32rpx;
		font-weight: bold;
		color: #222222;
		line-height: 90rpx;
	}
	.questionContent {
		width: 95%;
		padding: 0 16rpx;
		min-height: 370rpx;
		background: #F6F6F6;
		border-radius: 20rpx;
		font-size: 30rpx;
		color: #222222;
		line-height: 100rpx;
	}
	.textareaBox {
		width: 100%;
		height: 200rpx;
	}
	.submitBtn {
		width: 88%;
		height: 98rpx;
		line-height: 98rpx;
		background: linear-gradient(90deg, #19AD78, #1EBE85);
		border-radius: 49rpx;
		text-align: center;
		font-size: 32rpx;
		color: #FFFFFF;
		position: fixed;
		bottom: 45rpx;
		left: 5%;
		z-index: 999;
	}
</style>
